<template>
  <div id="antv" style="width: 80vw;height: 70vh"></div>
</template>

<script>

import G6 from '@antv/g6';
// import by this way in your project. 在您的项目中请这样引入


export default {
  name: "roleAntV",
  data() {
    return {
      data: {
        nodes: null,
        edges: null,
      }
    }
  },
  created() {
    let f = true;
    while (f) {
      this.data.nodes = this.$store.state.role.nodes;
      this.data.edges = this.$store.state.role.edges;
      if (this.data.nodes && this.data.edges) f = false;
    }
  },
  mounted() {
    this.initGraph(document.getElementById("antv"), this.data);
  },
  methods: {
    refreshDragedNodePosition(e) {
      const model = e.item.get('model');
      model.fx = e.x;
      model.fy = e.y;
    },
    initGraph(container, data) {
      const width = container.scrollWidth;
      const height = container.scrollHeight;
      const graph = new G6.Graph({
        container,
        width,
        height,
        layout: {
          type: 'force',
          rankdir: 'UD',
          align: 'LR',
          // controlPoints: true,
          // nodesepFunc: () => 1,
          // ranksepFunc: () => 1,
        },
        defaultNode: {
          color: '#5B8FF9',
          labelCfg: {
            style: {
              fill: '#000',
              fontSize: 5,
            },
          },
        },
        defaultEdge: {
          color: '#e2e2e2',
        },
        nodeStateStyles: {
          hover: {
            fill: '#FA8C1E',
          },
        },
        edgeStateStyles: {
          hover: {
            stroke: '#1890ff',
          }
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas'],
        },
      });
      graph.read(data);
      const _self = this;
      graph.on('node:dragstart', function (e) {
        graph.layout();
        _self.refreshDragedNodePosition(e);
      });
      graph.on('node:drag', function (e) {
        _self.refreshDragedNodePosition(e);
      });
      graph.on('node:dragend', function (e) {
        e.item.get('model').fx = null;
        e.item.get('model').fy = null;
      });

      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize('antv', container.scrollHeight);
        };
    }
  }
}
</script>

<style scoped>

</style>